<template>
  <div>
    <input type="text" v-bind:value="message"><br/>
    <input type="button" value="弹出" v-on:click="alertTxt($event.toElement)">
    <input type="button" value="改变" v-on:mouseover="changeTxt($event.currentTarget)" v-on:mouseout="changeDefault($event.currentTarget)">
  </div>
</template>

<script>
export default {
  name: "Test",
  data(){
    return {message:"hello 王旺旺",
      txtVal:""
    }
  },
  methods:{
    alertTxt:function(btn){
      console.log(btn);
      console.log(btn.previousElementSibling.previousElementSibling.value);
    },
    changeTxt:function(btn){
      console.log(btn);
      this.txtVal = btn.previousElementSibling.previousElementSibling.previousElementSibling.value;
      btn.previousElementSibling.previousElementSibling.previousElementSibling.value = 'bye 王旺旺';

    },
    changeDefault:function(btn){
      console.log(btn + " 222");
      btn.previousElementSibling.previousElementSibling.previousElementSibling.value = this.txtVal;
    }
  }
}
</script>

<style scoped>

</style>
